import { connect } from 'dva';
import {Component} from 'react';
import echarts from 'echarts'
import styles from './ChartsLine.css';

let indicators = [{
  name: '日期', key: 'Sk_CreateDateId',
}, {
  name: '一级分组', key: 'group1',
}, {
  name: '二级分组', key: 'group2',
}, {
  name: '三级分组', key: 'group3',
}, {
  name: '四级分组', key: 'group4',
}, {
  name: '地区', key: 'priorname',
}, {
  name: '门店Id', key: 'storeid',
}, {
  name: '门店名称', key: 'storename',
}, {
  name: '八大类', key: 'customcategoryname',
}, {
  name: '一级分类', key: 'highcategoryname',
}, {
  name: '二级分类', key: 'categoryname',
}, {
  name: '商品编码', key: 'commoditycode',
}, {
  name: '商品名称', key: 'commodityname',
}];
let dimensions = [{
  name: '订单数', key: 'cnt_order',
}, {
  name: 'GMV', key: 'GMV',
}, {
  name: '实付金额', key: 'SalesAmount',
}, {
  name: '销售件数', key: 'BuyQty',
}, {
  name: '退单数', key: 'cnt_return',
}, {
  name: '退单件数', key: 'return_buyqty',
}, {
  name: '退单金额', key: 'return_price',
}, {
  name: '商品成本', key: 'salescost',
}, {
  name: '赠品成本', key: 'giftcost',
}, {
  name: '毛利额', key: 'profit',
}, {
  name: '营销费用', key: 'promotionfee',
}, {
  name: '折扣', key: 'itempromotionfee',
}];
let xAxis = [];
let yAxis = [];
function handleIndicator(item) {
  console.log(117, item);
  xAxis.push(item);
}
function IndicatorItem(props) {
  // 对啦！这里不需要指定key:
  console.log(65, props);
  return <li onClick={handleIndicator.bind(this, props)}>{props.value} -- {props.key}</li>;
}
function IndicatorList(props) {
  console.log(62, props);
  const lists = props.indicators;
  if (lists) {
    const listItems = lists.map((item) =>
      // 又对啦！key应该在数组的上下文中被指定
      <IndicatorItem key={item.key} alias={item.key} value={item.name} />
    );
    return (
      <ul>
        {listItems}
      </ul>
    );
  }
  return (<span />);
}

function handleDimension(item) {
  console.log(85, item);
  yAxis.push(item);
}
function DimensionItem(props) {
  // 对啦！这里不需要指定key:
  return <li onClick={handleDimension.bind(this, props)}>{props.value}</li>;
}
function DimensionList(props) {
  const lists = props.dimensions;
  const listItems = lists.map((item) =>
    // 又对啦！key应该在数组的上下文中被指定
    <DimensionItem key={item.key} alias={item.key} value={item.name} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

function DrawCharts (list) {
  console.log('charts data::', list);
  const myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
}

class ChartsLine extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      xAxis: xAxis,
      yAxis: [],
    };
  }

  componentDidUpdate () {
    console.log('开始渲染Charts::');
    const propsData = this.props;
    let chartsData = propsData.testData.Data.rows;
    DrawCharts(chartsData);
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const test = this.props;
    console.log(59, test);
    const xAxisTest = this.props.xAxis;
    console.log(157, xAxisTest);
    return (
      <div>
        <h3>操作</h3>
        <div className={styles.list}>
          <div>指标</div>
          <IndicatorList indicators={indicators} />
        </div>
        <div className={styles.list}>
          <div>维度</div>
          <DimensionList dimensions={dimensions} />
        </div>
        <div className={styles.list}>
          <div>X 轴</div>
          <IndicatorList indicators={xAxisTest} />
        </div>
        <div className={styles.list}>Y 轴</div>
        <div id="main" className={styles.chartsBox} />
      </div>
    );
  }
}


function mapStateToProps(state) {
  const { testData } = state.charts;
  return {
    testData,
  };
}

export default connect(mapStateToProps)(ChartsLine);

// export default Form.create()(ChartsLine);
